<script setup>
import { onMounted, ref } from 'vue';
import { getWeatherApi } from '@/apis/api-system';

const weatherInfo = ref();

onMounted(() => {
  GetWeatherApi();
});

const GetWeatherApi = async () => {
  const [err, data] = await getWeatherApi();

  if (!err) {
    weatherInfo.value = data?.now;
  }
};
</script>
<template>
  <div class="weather-info flex items-center">
    <i :class="`qi-${weatherInfo?.icon}`" class="mr-10px text-25px" />
    <span class="text-nowrap text-18px">{{ weatherInfo?.temp ?? '--' }}℃</span>
    <span class="pl-5px pr-5px text-nowrap color-#AFC8E3">{{ weatherInfo?.text }}</span>
  </div>
</template>

<style scoped lang="scss">
.weather-info {
  font-family: $font-family-CN-YD;
}
</style>
